<template>
	<view class="all">
		<view class="top-content">
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">课程名称</text>
				</view>
				<input class="item-ipt" v-model="list.course_name" type="text" placeholder="请输入课程名称" />
			</view>
			<view class="content-item" @tap="show = true">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">时间</text>
				</view>
				<input class="item-ipt" v-model="list.train_time" disabled type="text" placeholder="请输入时间" />
			</view>
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">地点</text>
				</view>
				<input class="item-ipt" v-model="list.place" type="text" placeholder="请输入地点" />
			</view>
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">组织部门</text>
				</view>
				<input class="item-ipt" v-model="list.department" type="text" placeholder="请输入组织部门" />
			</view>
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">培训人</text>
				</view>
				<input class="item-ipt" v-model="list.people" type="text" placeholder="请输入培训人" />
			</view>
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">培训方式</text>
				</view>
				<input class="item-ipt" v-model="list.mode" type="text" placeholder="请输入培训方式" />
			</view>
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">培训对象</text>
				</view>
				<input class="item-ipt" v-model="list.object" type="text" placeholder="请输入培训对象" />
			</view>
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">培训目的</text>
				</view>
				<input class="item-ipt" v-model="list.objective" type="text" placeholder="请输入培训目的" />
			</view>
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">培训内容</text>
				</view>
				<input class="item-ipt" v-model="list.content" type="text" placeholder="请输入培训内容" />
			</view>
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">应到人数</text>
				</view>
				<input class="item-ipt" v-model="list.should_num" type="number" placeholder="请输入应到人数" />
			</view>
			<view class="content-item">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">实到人数</text>
				</view>
				<input class="item-ipt" v-model="list.actual_num" type="number" placeholder="请输入实到人数" />
			</view>
		</view>
		<view class="upload">
			<!-- <view class="uploadform">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">培训签到表</text>
				</view>
				<view class="addform-items">
					<view class="" style="position: relative;" v-for="(i,index) in list.file">
						<image class="form-file" src="../../static/word.png" :key="index" @tap="openFile(i,index)"></image>
						<image class="delet" src="/static/delet.png" mode="" @tap="deletImg('file',index)"></image>
					</view>
					<view class="add" @tap="choosefile('file')">
						<u-icon name="plus" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view> -->
			<view class="uploadform">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">培训签到表</text>
				</view>
				<view class="addform-items">
					<view class="" style="position: relative;" v-for="(i,index) in list.file">
						<image class="form-file" :src="i" :key="index" @tap="seeimg(list.file,index)"></image>
						<image class="delet" src="/static/delet.png" mode="" @tap="deletImg('file',index)"></image>
					</view>
					<view class="add" @tap="choosefrom('file')">
						<u-icon name="plus" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="uploadform">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">培训照片</text>
				</view>
				<view class="addform-items">
					<view class="" style="position: relative;" v-for="(i,index) in list.image">
						<image class="form-img" :src="i" :key="index" @tap="seeimg(list.image,index)"></image>
						<image class="delet" src="/static/delet.png" mode="" @tap="deletImg('image',index)">
						</image>
					</view>
					<view class="add" @tap="choosefrom('image')">
						<u-icon name="camera" color="#999999" size="28"></u-icon>
					</view>
				</view>
			</view>
			<view class="uploadform">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">培训效果</text>
				</view>
				<input class="item-ipt" v-model="list.effect" type="text" placeholder="请输入培训效果" />
			</view>
			<view class="uploadform">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">是否禁止协管员查看</text>
				</view>
				<view class="addform-items">
					<u-switch v-model="checked"></u-switch>
				</view>
			</view>
			<view class="textform">
				<view class="title">
					<text class="point"></text>
					<text class="item-title">总结</text>
				</view>
				<textarea class="textarea" v-model="list.summary" placeholder="添加总结" maxlength="500" />
			</view>
		</view>
		<view class="butn" @tap="save">保存</view>
		<u-picker v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>
		<l-file ref="lFile"  @up-success="upSuccess"></l-file>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				formImgs: [],
				picturesImgs: [],
				show: false,
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: false
				},
				$img: 'https://trq.wqzsgas.com',
				list: {
					course_name: '', //课程名称
					train_time: '',
					place: '', //地点
					department: '', //组织部门
					people: '', //培训人
					mode: '', //培训方式
					object: '', //培训对象
					objective: '', //培训目的
					content: '', //培训内容
					should_num: '', //应到人数
					actual_num: '', //实到人数
					effect: '', //培训效果
					summary: '', //培训总结
					image: [], //培训照片
					file: [], //培训签到表
					rule:1,
				},
				checked:false
			}
		},
		onLoad() {
			wx.enableAlertBeforeUnload({
			    message: "是否返回上一页",
			   });
		},
		methods: {
			choosefile(file){
				var _this = this
				wx.chooseMessageFile({
					count:1,
					type: 'file',
					extension:['doc','xls','ppt','pdf','docx','xlsx','pptx'],
					success:(res=>{
						console.log(res,'res');
						// _this.list.file.push(res.tempFiles[0].path) 
						uni.uploadFile({
							url: _this.$fileImg + '/common/uploadfile',
							filePath: res.tempFiles[0].path,
							name: 'file',
							header: {
								token:uni.getStorageSync('token')
							},
							success: (uploadFileRes) => {
								if (JSON.parse(uploadFileRes.data).code == 1) {
									console.log(JSON.parse(uploadFileRes.data),'json');
									this.list.file.push(JSON.parse(uploadFileRes.data).data
										.intact_url)
								}
							},
							fail: (err) => {
								console.log(err);
							}
						})
					}),
					fail:(err=>{
						console.log(err,'111');
					})
				})
			},
			openFile(file){
				var _this =this
				uni.downloadFile({
					url: file,
					success: (res) => {
						if (res.statusCode == 200) {
							uni.openDocument({
								filePath: res.tempFilePath,
								success: () => {
									// _this.$showToast('打开文档成功')
								},
								fail: () => {
									_this.$showToast('暂不支持此类型文件')
								}
							})
						}
					},
					fail: (err) => {
						_this.$showToast('暂不支持此类型文件')
					}
				})
			},
			add() {
				let _this = this
				uni.request({
					url: _this.$url + 'relevant.train_study/add',
					method: 'POST',
					header: {
						token: uni.getStorageSync('token')
					},
					data: _this.list,
					success: (res) => {
						_this.$showToast(res.data.msg)
						if (res.data.code == 1) {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1000)
						}
					}
				})
			},
			choosefrom(imgs) {
				if (this.list[imgs].length < 4) {
					var _this = this
					uni.chooseImage({
						count: 1,
						sizeType: ['original', 'compressed'],
						sourceType: ['camera', 'album'],
						success: (res) => {
							uni.uploadFile({
								url: _this.$fileImg + '/common/upload',
								filePath: res.tempFilePaths[0],
								name: 'file',
								header: _this._header,
								success: (uploadFileRes) => {
									if (JSON.parse(uploadFileRes.data).code == 1) {
										this.list[imgs].push(JSON.parse(uploadFileRes.data).data
											.intact_url)
									}
								},
								fail: (err) => {
									console.log(err);
								}
							})
						}
					})
				} else {
					this.$showToast('上传已达到限制')
				}
			},
			seeimg(imgs, index) {
				
				uni.previewImage({
					urls: imgs,
					current: index,
					loop: true
				})
			},
			deletImg(imgs, index) {
				this.list[imgs].splice(index, 1)
			},
			confirm(e) {
				console.log(e);
				this.list.train_time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			},
			save() {
				if(this.checked) {
					this.list.rule = 2
				}else{
					this.list.rule = 1
				}
				if (!this.list.course_name) return this.$showToast('请输入课程名称')
				if (!this.list.train_time) return this.$showToast('请输入培训时间')
				if (!this.list.place) return this.$showToast('请输入地点')
				if (!this.list.department) return this.$showToast('请输入组织部门')
				if (!this.list.people) return this.$showToast('请输入培训人')
				if (!this.list.mode) return this.$showToast('请输入培训方式')
				if (!this.list.object) return this.$showToast('请输入培训对象')
				if (!this.list.objective) return this.$showToast('请输入培训目的')
				if (!this.list.content) return this.$showToast('请输入培训内容')
				if (!this.list.should_num) return this.$showToast('请输入应到人数')
				if (!this.list.actual_num) return this.$showToast('请输入实到人数')
				if (!this.list.effect) return this.$showToast('请输入培训效果')
				if (!this.list.summary) return this.$showToast('请输入培训总结')
				if (this.list.image.length<1) return this.$showToast('请上传培训照片')
				if (this.list.file.length<1) return this.$showToast('请上传培训签到表')
				this.add()
			}
		}
	}
</script>

<style lang="less" scoped>
	.all {
		background: #F1F1F1;
		min-height: 100vh;

		.top-content {
			.content-item {
				display: flex;
				background: #FFFFFF;
				justify-content: space-between;
				border-bottom: 1px solid #DDDDDD;
				padding: 0rpx 32rpx;
				height: 100rpx;
				align-items: center;

				.title {
					display: flex;
					align-items: center;

					.point {
						width: 8rpx;
						height: 8rpx;
						background: #003690;
						border-radius: 50%;
						margin-right: 14rpx;
					}

					.item-title {
						font-size: 28rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						color: #333333;
					}
				}


				.item-ipt {
					width: 400rpx;
					text-align: end;
					font-size: 24rpx;
					font-family: Source Han Sans SC;
					font-weight: 400;
					color: #555555;
				}
			}
		}

		.upload {
			margin-top: 20rpx;
			background: #FFFFFF;
			padding: 0 30rpx;

			.uploadform {
				display: flex;
				align-items: center;
				padding: 22rpx 0;
				justify-content: space-between;
				border-bottom: 1rpx solid #DDDDDD;

				.title {
					display: flex;
					align-items: center;

					.point {
						width: 8rpx;
						height: 8rpx;
						background: #003690;
						border-radius: 50%;
						margin-right: 14rpx;
					}

					.item-title {
						font-size: 28rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						color: #333333;
					}
				}

				.addform-items {
					display: flex;
					align-items: center;

					.delet {
						position: absolute;
						top: -8rpx;
						right: 4rpx;
						width: 28rpx;
						height: 28rpx;
						z-index: 10;
					}

					.form-img {
						width: 60rpx;
						height: 60rpx;
						margin-right: 20rpx;
					}
					.form-file{
						width: 50rpx;
						height: 60rpx;
						margin-right: 20rpx;
					}

					.add {
						width: 60rpx;
						height: 60rpx;
						border: 1rpx solid #DDDDDD;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.item-ipt {
					width: 400rpx;
					text-align: end;
				}
			}

			.textform {
				display: flex;
				flex-direction: column;
				padding: 22rpx 0;

				.title {
					display: flex;
					align-items: center;

					.point {
						width: 8rpx;
						height: 8rpx;
						background: #003690;
						border-radius: 50%;
						margin-right: 14rpx;
					}

					.item-title {
						font-size: 28rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						color: #333333;
					}
				}

				.textarea {
					width: 95%;
					height: 300rpx;
					padding: 20rpx;
				}
			}
		}
	}
</style>
